<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框属性</title>
		<style>
			/*  CSS3基础语法：边框*/
			div{
				/* border边框属性 ：宽度 样式 颜色*/
				border:1px solid red;/* 生成1px实线红色边框 */
				/* div设置高宽 */
				height: 200px;
				width: 200px;
				/* border边框属性[复合属性值] 
				CSS定义效果 属性：属性值 属性值 属性值；
				属性值理解为子属性，作为主属性
				语法：属性-属性值   主属性
				border-width边框宽度属性   属性值：数值px
				border-style边框样式属性   属性值：solid实线 √
				                                dashed虚线
												double双线
												dotted点线
				border-color边框颜色属性								
				*/
			   border-width: 10px;
			   border-style: dotted;
			   border-color: yellow;
			   /* 
			   边框的四个方向：border-方向【left、right、top、bottom】-子属性
			   需求：左边边框宽度设置30px
			        右边框设置为黑色
					上边框设置为双线
					下边框设置为虚线
					生成1px实线红色的边框--CSS覆盖
			   */
			  border-left-color:black;
			  border-bottom-style: dashed;
			  border-top-style: double;
			  border-width: 1px;
			  border-style: solid;
			  border-color:red;
			  /* 画圆   边框倒角属性 border-radius 属性值*/
			  border-radius: 200px;/* 宽高与倒角：数值一致 ：圆*/
			  /* 顺时针：左上、右上、右下、左下*/
			  border-radius: 0 200px;
			  /* 顺时针：左上+右下、右上和左下*/
			  border-radius: 10px 100px 200px;
			  /* 顺时针：左上、右上+左下、右下*/
			  border-radius: 10px 50px 100px 150px;
			  /* 顺时针：左上、右上、右下、左下*/
			  /* 需求：左下角设置为300px*/
			  /* border-方向-倒角方向-radius*/
			  border-bottom-left-radius:300px;
			  border-top-right-radius:100px;
			}
		</style>
	</head>
	<body>
		<!--html5 文本元素群 分区元素span、div
		div 元素：页面空间区域，有宽没高
		-->
		<div></div>
	</body>
</html>